<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import {
  MagicStick,
  Document,
  ArrowRight,
  View,
  Star,
  ChatDotRound
} from '@element-plus/icons-vue'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import {
  getHotCities,
  getHotNotes,
  getHotPlans,
  getFeaturedCommunity
} from '../api/home'

gsap.registerPlugin(ScrollTrigger)

const router = useRouter()

// 首页数据
const hotCities = ref([])
const hotTravelNotes = ref([])
const hotTravelPlans = ref([])
const hotCommunityPosts = ref([])
const loading = ref(true)

// 加载首页数据
const loadHomeData = async () => {
  loading.value = true
  try {
    const [citiesRes, notesRes, plansRes, communityRes] = await Promise.all([
      getHotCities(6),
      getHotNotes(6),
      getHotPlans(6),
      getFeaturedCommunity(4)
    ])

    if (citiesRes.success) {
      hotCities.value = citiesRes.data
    }
    if (notesRes.success) {
      hotTravelNotes.value = notesRes.data
    }
    if (plansRes.success) {
      hotTravelPlans.value = plansRes.data
    }
    if (communityRes.success) {
      hotCommunityPosts.value = communityRes.data
    }
  } catch (error) {
    console.error('加载首页数据失败:', error)
  } finally {
    loading.value = false
  }
}

const goToCityDetail = (cityId) => {
  router.push(`/city/${cityId}`)
}

const goToTravelNoteDetail = (noteId) => {
  router.push(`/travel-note/${noteId}`)
}

const goToTravelPlanDetail = (planId) => {
  router.push(`/travel-plan/${planId}`)
}

const goToCommunityDetail = (postId) => {
  router.push(`/community/${postId}`)
}

const goToAIAssistant = () => {
  router.push('/ai-assistant')
}

const initAnimations = () => {
  const heroTimeline = gsap.timeline({ defaults: { ease: 'power2.out' } })

  const titleChars = document.querySelectorAll('.hero-title .title-char')
  const subtitle = document.querySelector('.hero-subtitle')
  const buttons = document.querySelectorAll('.hero-actions .el-button')
  const stats = document.querySelectorAll('.hero-stats .stat-item')

  if (titleChars.length > 0) {
    heroTimeline.fromTo(
      titleChars,
      {
        opacity: 0,
        y: 100,
        rotationX: -90
      },
      {
        opacity: 1,
        y: 0,
        rotationX: 0,
        stagger: 0.03,
        duration: 1,
        ease: 'back.out(1.7)'
      }
    )
  }

  if (subtitle) {
    heroTimeline.fromTo(
      subtitle,
      { opacity: 0, y: 50 },
      { opacity: 1, y: 0, duration: 0.8 },
      '-=0.5'
    )
  }

  if (buttons.length > 0) {
    heroTimeline.fromTo(
      buttons,
      { opacity: 0, scale: 0.8, y: 30 },
      {
        opacity: 1,
        scale: 1,
        y: 0,
        stagger: 0.15,
        duration: 0.6,
        ease: 'back.out(1.7)'
      },
      '-=0.4'
    )
  }

  if (stats.length > 0) {
    heroTimeline.fromTo(
      stats,
      { opacity: 0, y: 40 },
      { opacity: 1, y: 0, stagger: 0.1, duration: 0.6 },
      '-=0.4'
    )
  }

  const recommendCards = document.querySelectorAll('.recommendation-card')
  recommendCards.forEach((card, index) => {
    gsap.fromTo(
      card,
      { opacity: 0, y: 60 },
      {
        opacity: 1,
        y: 0,
        duration: 0.8,
        ease: 'power2.out',
        scrollTrigger: {
          trigger: card,
          start: 'top 85%',
          toggleActions: 'play none none reverse'
        }
      }
    )
  })

  const cityCards = document.querySelectorAll('.city-card')
  cityCards.forEach((card, index) => {
    gsap.fromTo(
      card,
      { opacity: 0, scale: 0.8 },
      {
        opacity: 1,
        scale: 1,
        duration: 0.6,
        ease: 'back.out(1.7)',
        scrollTrigger: {
          trigger: card,
          start: 'top 90%',
          toggleActions: 'play none none reverse'
        }
      }
    )
  })

  const noteCards = document.querySelectorAll('.travel-note-card')
  noteCards.forEach((card, index) => {
    gsap.fromTo(
      card,
      { opacity: 0, x: index % 2 === 0 ? -80 : 80 },
      {
        opacity: 1,
        x: 0,
        duration: 0.8,
        ease: 'power2.out',
        scrollTrigger: {
          trigger: card,
          start: 'top 85%',
          toggleActions: 'play none none reverse'
        }
      }
    )
  })
}

onMounted(async () => {
  await loadHomeData()

  await nextTick()

  setTimeout(() => {
    initAnimations()
  }, 300)
})
</script>

<template>
  <div class="home-container" v-loading="loading">
    <!-- 大屏Hero区域 -->
    <div class="hero-section page-section">
      <div class="hero-background">
        <div class="hero-overlay"></div>
      </div>
      <div class="hero-content">
        <div class="hero-text">
          <h1 class="hero-title">
            <span class="title-line">
              <span class="title-char">探</span>
              <span class="title-char">索</span>
              <span class="title-char">世</span>
              <span class="title-char">界</span>
            </span>
            <span class="title-line">
              <span class="title-char">发</span>
              <span class="title-char">现</span>
              <span class="title-char">美</span>
              <span class="title-char">好</span>
            </span>
          </h1>
          <p class="hero-subtitle">
            记录每一次旅行的精彩瞬间，分享属于你的旅行故事
          </p>
          <div class="hero-actions">
            <el-button
              type="primary"
              size="large"
              @click="goToAIAssistant"
              class="cta-button"
            >
              <el-icon><MagicStick /></el-icon>
              AI智能规划
            </el-button>
            <el-button
              size="large"
              @click="router.push('/community')"
              class="secondary-button"
            >
              <el-icon><Document /></el-icon>
              浏览社区
            </el-button>
          </div>
        </div>
        <div class="hero-stats">
          <div class="stat-item">
            <div class="stat-number">10K+</div>
            <div class="stat-label">旅行游记</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">5K+</div>
            <div class="stat-label">旅行计划</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">50+</div>
            <div class="stat-label">热门城市</div>
          </div>
        </div>
      </div>

      <!-- 向下滚动提示 -->
      <div class="scroll-indicator">
        <div class="mouse"></div>
        <p>向下滚动探索更多</p>
      </div>
    </div>

    <!-- 热门城市 -->
    <div class="section first-section">
      <div class="section-header">
        <h2>热门城市</h2>
        <el-button type="text" @click="router.push('/city')"
          >查看更多 <el-icon><ArrowRight /></el-icon
        ></el-button>
      </div>
      <div class="city-cards">
        <el-row :gutter="20">
          <el-col
            :xs="12"
            :sm="8"
            :md="6"
            :lg="4"
            v-for="city in hotCities"
            :key="city.id"
          >
            <div class="city-card" @click="goToCityDetail(city.id)">
              <div
                class="city-image"
                :style="{ backgroundImage: `url(${city.image})` }"
              >
                <div class="city-overlay">
                  <h3>{{ city.name }}</h3>
                  <p>{{ city.visitCount }}+ 人去过</p>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 热门游记 -->
    <div class="section">
      <div class="section-header">
        <h2>热门游记</h2>
        <el-button type="text" @click="router.push('/travel-note')"
          >查看更多 <el-icon><ArrowRight /></el-icon
        ></el-button>
      </div>
      <div class="travel-notes">
        <el-row :gutter="20">
          <el-col
            :xs="24"
            :sm="12"
            :md="8"
            v-for="note in hotTravelNotes"
            :key="note.id"
          >
            <div
              class="travel-note-card"
              @click="goToTravelNoteDetail(note.id)"
            >
              <div
                class="travel-note-image"
                :style="{ backgroundImage: `url(${note.cover})` }"
              >
                <div class="travel-note-overlay">
                  <h3>{{ note.title }}</h3>
                </div>
              </div>
              <div class="travel-note-info">
                <div class="travel-note-author">
                  <el-avatar :src="note.avatar" size="small"></el-avatar>
                  <span>{{ note.author }}</span>
                </div>
                <div class="travel-note-stats">
                  <span
                    ><el-icon><View /></el-icon> {{ note.viewCount }}</span
                  >
                  <span
                    ><el-icon><Star /></el-icon> {{ note.likeCount }}</span
                  >
                </div>
              </div>
              <p class="travel-note-summary">{{ note.summary }}</p>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 热门行程 -->
    <div class="section">
      <div class="section-header">
        <h2>热门行程</h2>
        <el-button type="text" @click="router.push('/travel-plan')"
          >查看更多 <el-icon><ArrowRight /></el-icon
        ></el-button>
      </div>
      <div class="travel-plans">
        <el-row :gutter="20">
          <el-col
            :xs="24"
            :sm="12"
            :md="8"
            v-for="plan in hotTravelPlans"
            :key="plan.id"
          >
            <div
              class="travel-plan-card"
              @click="goToTravelPlanDetail(plan.id)"
            >
              <div
                class="travel-plan-image"
                :style="{ backgroundImage: `url(${plan.cover})` }"
              >
                <div class="travel-plan-days">{{ plan.days }}天</div>
              </div>
              <div class="travel-plan-info">
                <h3>{{ plan.title }}</h3>
                <div class="travel-plan-tags">
                  <el-tag
                    v-for="(tag, index) in plan.tags"
                    :key="index"
                    size="small"
                    >{{ tag }}</el-tag
                  >
                </div>
                <div class="travel-plan-stats">
                  <span
                    ><el-icon><View /></el-icon> {{ plan.viewCount }}</span
                  >
                  <span
                    ><el-icon><Star /></el-icon> {{ plan.favoriteCount }}</span
                  >
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 社区精选 -->
    <div class="section">
      <div class="section-header">
        <h2>社区精选</h2>
        <el-button type="text" @click="router.push('/community')"
          >查看更多 <el-icon><ArrowRight /></el-icon
        ></el-button>
      </div>
      <div class="community-posts">
        <el-row :gutter="20">
          <el-col
            :xs="24"
            :sm="12"
            v-for="post in hotCommunityPosts"
            :key="post.id"
          >
            <div
              class="community-post-card"
              @click="goToCommunityDetail(post.id)"
            >
              <div class="community-post-header">
                <div class="community-post-author">
                  <el-avatar :src="post.avatar" size="small"></el-avatar>
                  <span>{{ post.author }}</span>
                </div>
                <div class="community-post-time">{{ post.createTime }}</div>
              </div>
              <h3 class="community-post-title">{{ post.title }}</h3>
              <p class="community-post-content">{{ post.content }}</p>
              <div
                class="community-post-images"
                v-if="post.images && post.images.length > 0"
              >
                <div
                  v-for="(image, index) in post.images"
                  :key="index"
                  class="community-post-image"
                  :style="{ backgroundImage: `url(${image})` }"
                ></div>
              </div>
              <div class="community-post-stats">
                <span
                  ><el-icon><ChatDotRound /></el-icon>
                  {{ post.commentCount }}</span
                >
                <span
                  ><el-icon><Star /></el-icon> {{ post.likeCount }}</span
                >
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<style scoped>
.home-container {
  max-width: 100%;
  margin: 0;
  scroll-behavior: smooth;
}

.page-section {
  min-height: 100vh;
}

.section {
  margin-bottom: 40px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h2 {
  font-size: 24px;
  color: #1a1a1a;
  margin: 0;
}

/* Hero区域样式 */
.hero-section {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 0;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #0a192f 0%, #112240 50%, #1a365d 100%);
  background-size: cover;
  background-position: center;
}

.hero-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('https://picsum.photos/1920/1080?random=hero') center/cover;
  opacity: 0.08;
  animation: slowZoom 30s ease-in-out infinite alternate;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(10, 25, 47, 0.5) 0%,
    rgba(10, 25, 47, 0.9) 100%
  );
}

@keyframes slowZoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  max-width: 1200px;
  padding: 0 20px;
  width: 100%;
}

.hero-text {
  margin-bottom: 60px;
}

.hero-title {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 24px 0;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.title-line {
  display: block;
  perspective: 1000px;
}

.title-char {
  display: inline-block;
  margin: 0 0.05em;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.hero-subtitle {
  font-size: 1.5rem;
  font-weight: 300;
  margin: 0 0 40px 0;
  opacity: 0.85;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.cta-button {
  padding: 18px 36px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 50px;
  background: linear-gradient(135deg, #64ffda 0%, #1de9b6 100%);
  border: none;
  color: #0a192f;
  box-shadow: 0 10px 30px rgba(100, 255, 218, 0.3);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(100, 255, 218, 0.5);
  background: linear-gradient(135deg, #1de9b6 0%, #64ffda 100%);
}

.secondary-button {
  padding: 18px 36px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(100, 255, 218, 0.3);
  color: #64ffda;
  backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.secondary-button:hover {
  background: rgba(100, 255, 218, 0.1);
  border-color: rgba(100, 255, 218, 0.6);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(100, 255, 218, 0.2);
  color: #64ffda;
}

/* 滚动指示器 */
.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.6);
  animation: float 2s ease-in-out infinite;
}

.scroll-indicator p {
  font-size: 14px;
  margin: 0;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.mouse {
  width: 26px;
  height: 42px;
  border: 2px solid rgba(100, 255, 218, 0.4);
  border-radius: 15px;
  position: relative;
}

.mouse::before {
  content: '';
  width: 4px;
  height: 10px;
  background: #64ffda;
  border-radius: 2px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  animation: scroll 1.5s infinite;
}

@keyframes scroll {
  0% {
    opacity: 1;
    top: 8px;
  }
  100% {
    opacity: 0;
    top: 24px;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-10px);
  }
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 60px;
}

.stat-item {
  text-align: center;
  padding: 20px 30px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(100, 255, 218, 0.1);
  transition: all 0.3s ease;
}

.stat-item:hover {
  background: rgba(100, 255, 218, 0.05);
  border-color: rgba(100, 255, 218, 0.3);
  transform: translateY(-5px);
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #64ffda 0%, #1de9b6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 1rem;
  opacity: 0.7;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.8);
}

.first-section {
  margin-top: 20px !important;
}

.section:not(.hero-section) {
  padding: 0 40px;
}

.city-cards {
  margin-bottom: 20px;
}

.city-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.3s;
}

.city-card:hover {
  transform: translateY(-5px);
}

.city-image {
  height: 150px;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.city-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: white;
}

.city-overlay h3 {
  margin: 0 0 5px;
  font-size: 18px;
}

.city-overlay p {
  margin: 0;
  font-size: 12px;
}

/* 游记卡片样式 */
.travel-note-card {
  margin-bottom: 20px;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.travel-note-card:hover {
  transform: translateY(-5px);
}

.travel-note-image {
  height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.travel-note-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: white;
}

.travel-note-overlay h3 {
  margin: 0;
  font-size: 18px;
}

.travel-note-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.travel-note-author {
  color: #0a192f;
  display: flex;
  align-items: center;
  gap: 10px;
}

.travel-note-stats {
  display: flex;
  gap: 15px;
  color: #666;
  font-size: 14px;
}

.travel-note-summary {
  padding: 15px;
  margin: 0;
  color: #666;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 旅游计划卡片样式 */
.travel-plan-card {
  color: #0a192f;
  margin-bottom: 20px;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.travel-plan-card:hover {
  transform: translateY(-5px);
}

.travel-plan-image {
  height: 180px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.travel-plan-days {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(64, 158, 255, 0.9);
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-weight: bold;
}

.travel-plan-info {
  padding: 15px;
}

.travel-plan-info h3 {
  margin: 0 0 10px;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.travel-plan-tags {
  margin-bottom: 10px;
  display: flex;
  gap: 5px;
}

.travel-plan-stats {
  display: flex;
  justify-content: space-between;
  color: #666;
  font-size: 14px;
}

/* 社区帖子样式 */
.community-post-card {
  color: #0a192f;
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s;
}

.community-post-card:hover {
  transform: translateY(-5px);
}

.community-post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.community-post-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.community-post-time {
  color: #999;
  font-size: 14px;
}

.community-post-title {
  margin: 0 0 10px;
  font-size: 18px;
}

.community-post-content {
  margin: 0 0 15px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.community-post-images {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.community-post-image {
  width: 100px;
  height: 100px;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
}

.community-post-stats {
  display: flex;
  gap: 20px;
  color: #666;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .hero-section {
    height: 80vh;
    min-height: 500px;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .hero-subtitle {
    font-size: 1.2rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .cta-button,
  .secondary-button {
    width: 200px;
    padding: 14px 24px;
    font-size: 1rem;
  }

  .hero-stats {
    gap: 40px;
  }

  .stat-number {
    font-size: 2rem;
  }

  .community-post-images {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 2rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .hero-stats {
    gap: 30px;
  }

  .stat-number {
    font-size: 1.8rem;
  }

  .stat-label {
    font-size: 0.9rem;
  }
}
</style>
